// miniprogram/devTools/imgfilter/imgfilter.js
import {
  picture_imageRes
} from '../../libs/resource'
Page({

  data: {
    imgPath: picture_imageRes[0],
    bottomHeightStr: '',
    // 过滤样式内容
    filterValues: '',
    // 过滤数据配置
    filterFunc: [{
      title: 'blur(高斯模糊，单位：px，默认：0)',
      key: 'blur',
      unit: 'px',
      value: 0
    }, {
      title: 'brightness(亮度，单位：%，默认：100)',
      key: 'brightness',
      unit: '/',
      value: 100
    }, {
      title: 'contrast(对比度，单位：%，默认：100)',
      key: 'contrast',
      unit: '%',
      value: 100,
      max: 200
    }, {
      title: 'grayscale(对比度，单位：%，默认：0)',
      key: 'grayscale',
      unit: '%',
      value: 0
    }, {
      title: 'hue-rotate(色相旋转，单位：deg，默认：0)',
      key: 'hue-rotate',
      unit: 'deg',
      value: 0,
      max: 360
    }, {
      title: 'invert(色相旋转，单位：%，默认：0)',
      key: 'invert',
      unit: '%',
      value: 0
    }, {
      title: 'opacity(透明度，单位：%，默认：0)',
      key: 'opacity',
      unit: '%',
      value: 100
    }, {
      title: 'saturate(饱和度，单位：%，默认：0)',
      key: 'saturate',
      unit: '%',
      value: 100,
      max: 200
    }, {
      title: 'sepia(深褐化，单位：%，默认：0)',
      key: 'sepia',
      unit: '%',
      value: 0
    }]
  },
  onLoad: function (options) {
    let filterFuncSave = JSON.parse(JSON.stringify(this.data.filterFunc))
    this.setData({
      filterFuncSave
    })
    this.updateFilterValues()
  },
  onShareAppMessage: function () {

  },
  onImageLoad(e) {
    console.log("onImageLoad", e)
    let bottomHeightStr = ''
    // 获取top_layout来计算bottom_layout的高度,这样还是不准确
    var query = wx.createSelectorQuery();
    query.select('#top_layout').boundingClientRect();
    query.exec(res => {
      console.log("onImageLoad", res)
      let topHeight = res[0].height
      bottomHeightStr = `height: clac(50vh - ${topHeight}px)`
      this.setData({
        bottomHeightStr
      })
    })
  },
  onRestClick(e) {
    // console.log("onRestClick", e)
    let filterFunc = JSON.parse(JSON.stringify(this.data.filterFuncSave))
    this.setData({
      filterFunc
    })
    this.updateFilterValues()
  },
  updateFilterValues() {
    let filterList = this.data.filterFunc
    let filterValues = 'filter:'
    filterList.forEach((item, index) => {
      let filterVal = ''
      if (item.unit == '/') {
        let valueCut = item.value / 100
        filterVal = `${item.key}(${valueCut}) `
      } else {
        filterVal = `${item.key}(${item.value}${item.unit}) `
      }
      filterValues += filterVal;
    })
    this.setData({
      filterValues
    })
  },
  slider4change(e) {
    // console.log("slider4change", e)
    let mIndex = e.currentTarget.dataset.idx
    let sliderValue = e.detail.value
    let filterList = this.data.filterFunc
    filterList.forEach((item, index) => {
      if (index == mIndex)
        item.value = sliderValue
    })
    this.setData({
      filterFunc: filterList
    })
    this.updateFilterValues()
  },
  copyText: function (e) {
    // console.log(e)
    let text = e.currentTarget.dataset.text
    if (typeof text == 'object')
      text = text[0]
    console.log("copyText", text)
    wx.setClipboardData({
      data: text,
      success: function (res) {
        wx.getClipboardData({
          success: function (res) {
            wx.showToast({
              title: '复制成功',
              icon: 'none'
            })
          }
        })
      }
    })
  },
})